<template>
  <div class="excavate-list"  :class="{close: isClose}" :style="{width: boxWidth}">
    <div class="title">
      <span>上下游挖掘结果</span>
      <Button @click="addList" type="primary" size="small" style="margin-left: 20px;">添加</Button>

      <Icon @click.native="closeBox" type="close" style="float: right; cursor: pointer;" color="#125EAA"></Icon>
    </div>
    <div class="con">
      <Table height="300" @on-selection-change="listCg" :columns="names" :data="datas"></Table>
    </div>
  </div>
</template>

<script>
import { Table, Button, Message, Icon } from "iview";
import { bus } from "./bus";
export default {
  components: {
    Table, Button, Icon
  },
  data() {
    return {
      isClose: true,
      boxWidth: '1200px',
      names: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "企业名称",
          key: "name",
          sortable: true
        },
        {
          title: "交易笔数",
          key: "data1",
          sortable: true
        },
        {
          title: "交易金额",
          key: "data2",
          sortable: true
        },
        {
          title: "行内账户交易",
          key: "data3",
          sortable: true
        },
        {
          title: "行外账户交易",
          key: "data4",
          sortable: true
        }
      ],
      datas: [],
      selList: [],
      num: 10
    };
  },
  methods: {
    listCg (data) {
      var self = this;
      self.selList = data;
    },
    addList () {
      var self = this;
      self.$Message = Message;

      if(!self.selList.length)
      {
        self.$Message.info('请至少选择一项');
        return;
      }

      bus.$emit('sendSel', self.selList, self.num);
      self.num += 10;
    },

    closeBox() {
      var self = this;
      self.datas = self.selList = [];
      self.isClose = true;
    },

    changeSize (width, height, infoObj) {
      var self = this;

      var infoClose = true;
      
      if(infoObj.hasOwnProperty('isClose'))
      {
        infoClose = infoObj.isClose;
      }

      var nWidth = width - 60;
      if(!infoClose)
      {
        nWidth -= 400;
      }

      if(nWidth > 1200)
      {
        self.boxWidth = '1200px';
      }
      else
      {
        self.boxWidth = nWidth + 'px';
      }
    }
  },
  mounted() {
    var self = this;
    bus.$on('getExcavate', function (id){
      self.isClose = false;
      var datas = [];
      for(let i=0; i<self.getRandom(1, 100); i++)
      {
        datas.push({
          name: "某某公司" + self.getRandom(10, 50),
          data1: self.getRandom(20, 100),
          data2: self.getRandom(20000, 999999),
          data3: self.getRandom(20000, 999999),
          data4: self.getRandom(20000, 999999)
        });
      }
      self.datas = datas;
    });

    bus.$on('getSize', function (width, height, infoObj){
      self.changeSize(width, height, infoObj);
    })
  }
};
</script>

<style scoped>
.excavate-list {
  transition: .6s;
  width: 1200px;
  position: fixed;
  z-index: 1;
  bottom: 30px;
  left: 20px;
  background: rgba(255, 255, 255, .9);
  padding: 5px;
  border-radius: 4px;
}
.excavate-list.close {
  bottom: -480px;
}
.title {
  padding: 5px 0;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 10px;
}
.title span {
  display: inline-block;
  border-left: 6px solid #2661dd;
  font-size: 16px;
  padding-left: 10px;
}
</style>
